<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据库对比结果报告</title>
	<script src="js/vue.js"></script>
	<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
	<script src="js/element-ui/lib/index.js"></script>
	<script src="js/axios.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/report.css">
</head>
<body>
	<div id="app">
		<div class="header-panel">
			<div></div>
			<div><h2>{{title}}</h2></div>
			<div></div>
		</div>
		<div class="float-panel">
			<div>
				<el-tooltip effect="light" content="下载报告" placement="left">
					<el-button type="success" @click="downloadImg()" size="medium" icon="el-icon-download">下载</el-button>
				</el-tooltip>
			</div>
		</div>
		<div class="container" id="postImg" ref="postImg" style="margin-top: 10px;">
			<div v-if="extraTableList.length==0 && missTableList.length==0">恭喜，数据库无差异。</div>
			<div class="block-table extra" v-if="extraTableList && extraTableList.length > 0">
				<h3>变动库增加的表</h3>
				<label v-for="item in extraTableList">{{item}}</label>
			</div>
			<div class="block-table miss" v-if="missTableList && missTableList.length > 0">
				<h3>变动库缺失的表</h3>
				<label v-for="item in missTableList">{{item}}</label>
			</div>
			<div class="block-table change" v-if="changeTableList && changeTableList.length > 0">
				<h3>变动库变化的表</h3>
				<div class="block-column" v-for="item in changeTableList">
					<h4><span><label>{{item.tableName}}表</label></span></h4>
					<div class="block-table extra" v-if="item.extraColumnList && item.extraColumnList.length > 0">
						<h5>增加的字段</h5>
						<label v-for="item1 in item.extraColumnList">{{item1}}</label>
					</div>
					<div class="block-table miss" v-if="item.missColumnList && item.missColumnList.length > 0">
						<h5>缺失的字段</h5>
						<label v-for="item1 in item.missColumnList">{{item1}}</label>
					</div>
					<div class="block-table" v-if="item.columnInfoList && item.columnInfoList.length > 0">
						<h5>变动的字段</h5>
						<el-table :data="item.columnInfoList" stripe style="width: 100%">
							<el-table-column prop="fieldName" label="字段名称"></el-table-column>
							<el-table-column prop="isChangeFieldType" label="类型" width="70px">
								<template slot-scope="scope">
									<el-tooltip v-if="scope.row.isChangeFieldType == 1" effect="light" :content="getContent(scope.row, 'isChangeFieldType')" placement="top">
									  <i class="el-icon-info"></i>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column prop="isChangeLength" label="长度" width="70px">
								<template slot-scope="scope">
									<el-tooltip v-if="scope.row.isChangeLength == 1" effect="light" :content="getContent(scope.row, 'isChangeLength')" placement="top">
									  <i class="el-icon-info"></i>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column prop="isChangeSecondLength" label="小数位" width="70px">
								<template slot-scope="scope">
									<el-tooltip v-if="scope.row.isChangeSecondLength == 1" effect="light" :content="getContent(scope.row, 'isChangeSecondLength')" placement="top">
									  <i class="el-icon-info"></i>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column prop="isChangeNotNull" label="非空" width="70px">
								<template slot-scope="scope">
									<el-tooltip v-if="scope.row.isChangeNotNull == 1" effect="light" :content="getContent(scope.row, 'isChangeNotNull')" placement="top">
									  <i class="el-icon-info"></i>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column prop="isChangeUnsigned" label="无符号" width="70px">
								<template slot-scope="scope">
									<el-tooltip v-if="scope.row.isChangeUnsigned == 1" effect="light" :content="getContent(scope.row, 'isChangeUnsigned')" placement="top">
										<i class="el-icon-info"></i>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column prop="isChangeDefaultValue" label="默认值" width="70px">
								<template slot-scope="scope">
									<el-tooltip v-if="scope.row.isChangeDefaultValue == 1" effect="light" :content="getContent(scope.row, 'isChangeDefaultValue')" placement="top">
									  <i class="el-icon-info"></i>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column prop="isChangeComment" label="注释" width="70px">
								<template slot-scope="scope">
									<el-tooltip v-if="scope.row.isChangeComment == 1" effect="light" :content="getContent(scope.row, 'isChangeComment')" placement="top">
									  <i class="el-icon-info"></i>
									</el-tooltip>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="js/html2canvas.min.js"></script>
	<script src="js/utils.js"></script>
	<script>
		let that = new Vue({
			el: '#app',
			data: function () {
				return {
					title: "数据库差异报告",
					loading:false,
					extraTableList:[],
					missTableList:[],
					changeTableList:[],
					tableData: []
				}
			},
			methods: {
				downloadImg(){
					// 参考：https://www.jianshu.com/p/22bd5b98e38a
					html2canvas(this.$refs.postImg, {
						allowTaint: true,
						taintTest: false,
						useCORS: true,
						scrollY: 0,
						scrollX: 0,
						width: this.$refs.postImg.clientWidth,
						height: this.$refs.postImg.clientHeight,
						scale: 2.5,
					}).then(canvas => {
						// 转成图片，生成图片地址
						let imgUrl = canvas.toDataURL('image/png');
						const eleLink = document.createElement('a');
						eleLink.href = imgUrl; // 转换后的图片地址
						eleLink.download = that.title;
						// 触发点击
						document.body.appendChild(eleLink);
						eleLink.click();
						// 然后移除
						document.body.removeChild(eleLink);
					});
				},
				getReport(changeKey, targetKey){
					axios.get(`${baseUrl}/api/getReport?changeKey=${changeKey}&targetKey=${targetKey}`).then(response => {
						console.log(response.data);
						let result = response.data.result;
						this.extraTableList = result.extraTableList;
						this.missTableList = result.missTableList;
						this.changeTableList = result.changeTableList;
					}).catch(error => {
						console.log(error);
					})
				},
				getContent(row, type){
					let separate = " 变动为 ";
					if (type == 'isChangeFieldType') {
						return row.targetFieldType + separate + row.changeFieldType;
					} else if (type == 'isChangeLength') {
						return row.targetLength + separate + row.changeLength;
					} else if (type == 'isChangeDefaultValue') {
						return row.targetDefaultValue + separate + row.changeDefaultValue;
					} else if (type == 'isChangeSecondLength') {
						return row.targetSecondLength + separate + row.changeSecondLength;
					} else if (type == 'isChangeNotNull') {
						return row.targetNotNull + separate + row.changeNotNull;
					} else if (type == 'isChangeComment') {
						return row.targetComment + separate + row.changeComment;
					} else if (type == 'isChangeUnsigned') {
						return row.targetUnsigned + separate + row.changeUnsigned;
					}
					return "";
				},
				setTitle(changeKey, targetKey){
					axios.get(`${baseUrl}/api/list`).then(response => {
						let tableData = response.data.result;
						let changeObj, targetObj;
						for (let i=0; i<tableData.length; i++) {
							if (tableData[i].key == changeKey) {
								changeObj = tableData[i];
							}
							if (tableData[i].key == targetKey) {
								targetObj = tableData[i];
							}
						}
						this.title = changeObj.name + "和" + targetObj.name + this.title;
					}).catch(error => {
						console.log(error);
					})
				},
			},
			mounted() {
				let changeKey = getUrlParam("changeKey");
				let targetKey = getUrlParam("targetKey");
				this.getReport(changeKey, targetKey);
				this.setTitle(changeKey, targetKey);
			}
		})
	</script>
</body>
</html>
